<template>
    <div id="page-pay-done">
        <div class="page-title">
            位置：我的订单 / 确认订单 / 付款 / 支付成功
        </div>
        <div class="pay-sign">
            为了您的财产安全，不要点击陌生链接、不要向任何人透露银行卡或验证码信息，谨防诈骗！
        </div>
        <ul class="step-bar">
            <li class="active"><i class="icon icon-confirm-order"></i><span>确认订单</span></li>
            <li class="active"><i class="icon icon-pay"></i><span>付款</span></li>
            <li class="active"><i class="icon icon-success"></i><span>支付成功</span></li>
        </ul>
        <div class="pay-status-wrap">
            <div class="title">
                <span>{{$store.state.nickName}}</span>
                |
                <nuxt-link :to="{name:'personal-orders'}">订单中心</nuxt-link>
            </div>
            <div class="fee-info">
                <span class="left">订单已支付，订单号：{{orderId}}</span>
                <span class="date">{{orderCreateTime}}</span>
            </div>
            <div class="pay-done">
                <i class="icon icon-pay-done"></i>
                <span>支付成功！感谢使用政府采购信息网产品</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "payDone",
        data(){
            return {
                orderId:'',
                orderCreateTime:'',
            }
        },
        mounted() {
            // this.$store.state.sideBarShow = true;
            this.orderId = this.$route.query.orderId?this.$route.query.orderId:'查询中...';
            this.orderCreateTime = this.$route.query.orderCreateTime?this.$route.query.orderCreateTime:'';
        }
    }
</script>

<style scoped lang="less">
    #page-pay-done{
        @moudle-bg-color:#ffffff;
        @under-line:1px solid #F5F5FB;
        font-family:'Microsoft YaHei','微软雅黑';
        .color(#090909);

        .pay-sign{
            background-color: #f9e2cb;
            .lh(39px);
            .color(#cc0606);
            padding-left: 14px;
        }
        ul.step-bar{
            .bg('@{img-base-url}order_step-3.png');
        }
        .pay-status-wrap{
            background-color: #FFFFFF;
            margin-top: 12px;
            .title{
                text-align: right;
                .fz(14px);
                .color(#7B7A7A);
                .lh(55px);
                padding-right: 21px;
                .bg('@{img-base-url}orderPay-text-shouyintai.png');
                background-size: auto;
                background-position: 20px center;
                border-bottom: 2px solid #E9E9E9;
            }
            .fee-info{
                .lh(70px);
                .fz(16px);
                .color(#171717);
                padding: 0 20px;
                border-bottom: 2px solid #E9E9E9;

                .date{
                    .color(#c2c2c2);
                    .fz(14px);
                    margin-left: 13px;
                }
            }
            .pay-done{
                .height(350px);
                padding-top: 97px;
                .color(@main-color);
                text-align: center;

                i{
                    .size(37px,37px);
                    .bg('@{img-base-url}pay-done_icon-pay-success.png');
                }
                span{
                    margin-left: 15px;
                }
            }
        }
    }
</style>